<template>
  <div>
      <!-- 头部面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/wlecome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加商品</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片区域 -->
        <el-card>
             <el-alert title="添加商品信息" type="info" show-icon center :closable="false">
            </el-alert>
            <!-- 步骤条 -->
            <el-steps align-center style="margin-top:20px" :active="current_step_and_tab - 0" finish-status="success">
                <el-step title="基本信息"></el-step>
                <el-step title="商品参数"></el-step>
                <el-step title="商品属性"></el-step>
                <el-step title="商品图片"></el-step>
                <el-step title="商品内容"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>
            <!-- Tab栏 -->
            <el-form :model="add_from_data" :rules="add_from_rules" ref="add_from_ref" label-width="100px" label-position="top">
                <el-tabs @tab-click="tab_clickon_onfun" v-model="current_step_and_tab" :before-leave="tab_change_onfun" style="margin-top:20px" tab-position="left">
                    <el-tab-pane label="基本信息" name="0">
                        <el-form-item label="商品名称" prop="goods_name">
                            <el-input v-model="add_from_data.goods_name"></el-input>
                        </el-form-item>
                        <el-form-item label="商品价格(元)" prop="goods_price">
                            <el-input type="number" v-model="add_from_data.goods_price"></el-input>
                        </el-form-item>
                        <el-form-item label="商品重量(克)" prop="goods_weight">
                            <el-input type="number" v-model="add_from_data.goods_weight"></el-input>
                        </el-form-item> 
                        <el-form-item label="商品数量" prop="goods_number">
                            <el-input type="number" v-model="add_from_data.goods_number"></el-input>
                        </el-form-item>
                        <el-form-item label="商品分类">
                            <el-cascader
                                expand-trigger="hover"
                                :options="goods_fenlei_lists"
                                :props="cascader_config"
                                v-model="geton_keys_ids"
                                change-on-select
                                @change="cascader_change_onfun">
                            </el-cascader>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="商品参数" name="1">
                        <el-form-item :label="item.attr_name" :key="item.attr_id" v-for="(item) in shop_d_params_lists">
                            <el-checkbox-group v-model="item.attr_vals">
                                <el-checkbox border :label="bq" :key="index" v-for="(bq, index) in item.attr_vals"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="商品属性" name="2">
                        <el-form-item :label="item.attr_name" :key="item.attr_id" v-for="item in shop_j_params_lists">
                            <el-input :value="item.attr_vals"></el-input>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="商品图片" name="3">
                        <el-upload
                            class="upload-demo"
                            action="http://127.0.0.1:8888/api/private/v1/upload"
                            :on-preview="Preview_image_onfun"
                            :on-remove="remove_image_onfun"
                            :before-remove="before_remove_onfun"
                            :on-success="on_imgUP_success_onfun"
                            multiple
                            :limit="3"
                            :headers="header_config"
                            list-type="picture"
                            :file-list="img_fileList">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-tab-pane>
                    <el-tab-pane label="商品内容" name="4">
                        <quill-editor v-model="add_from_data.goods_introduce" style="height:400px">
                        </quill-editor>
                        <!-- 提交按钮  -->
                        <el-button style="margin-top:50px" @click="add_goods_onfun" type="primary">添加商品</el-button>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
        </el-card>

        <!-- 图片预览对话框 -->
        <el-dialog
            title="图片预览"
            :visible.sync="is_img_preview_show"
            width="50%">
            <img :src="currt_url" alt="" style="width: 100%">
        </el-dialog>
  </div>
</template>

<script>
    import _ from 'lodash'
    export default {
        name:'Add_goods',
        data () {
            return {
               current_step_and_tab: '0',
               add_from_data:{
                   goods_name:'dwff',
                   goods_price:'12',
                   goods_weight:'12',
                   goods_number:'12',
                   goods_introduce:'',
                   pics: [],
                   attrs:[]
               },
               add_from_rules:{
                   goods_name:[
                        { required: true, message: "请输入商品名称", trigger: "blur" },
                        { min: 3, max: 9, message: "长度在3-9位", trigger: "blur" },
                   ],
                   goods_price:[
                        { required: true, message: "请输入商品价格", trigger: "blur" },
                        { min: 1, max: 6, message: "长度在1-6位", trigger: "blur" },
                   ],
                   goods_weight:[
                        { required: true, message: "请输入商品重量", trigger: "blur" },
                        { min: 1, max: 6, message: "长度在1-6位", trigger: "blur" },
                   ],
                   goods_number:[
                        { required: true, message: "请输入商品数量", trigger: "blur" },
                        { min: 1, max: 6, message: "长度在1-6位", trigger: "blur" },
                   ]
               },
               goods_fenlei_lists:[],
               cascader_config: {
                   value:'cat_id',
                   label:'cat_name',
                   children:'children'
               },
               geton_keys_ids:[174, 223, 235],
                // 商品参数
               shop_d_params_lists:[], //动态
               shop_j_params_lists:[],  //静态
               
            //    图片文件列表
               img_fileList:[],
            //    配置图片上传的请求头信息
               header_config:{
                   Authorization:window.sessionStorage.getItem('token')
               },
                
                // 是否显示图片预览
               is_img_preview_show: false,
                //    预览图片路径
               currt_url: ''
            }
        },
        methods: {
            // 获取分类数据
            async get_goods_fenlei_data() {
                const {data:res_data} = await this.$axios.get('categories');
                if(res_data.meta.status != 200) {
                    return this.$Message.error('获取失败');
                }
                // 成功后在从新获取用户列表
                this.goods_fenlei_lists = res_data.data;
                return this.$Message.success('获取成功!');
            },
            // 级联款的选中发生改变触发
            cascader_change_onfun() {
                if(this.geton_keys_ids.length !== 3) this.geton_keys_ids = [];
            },
            // tab页发生切换时触发s
            tab_change_onfun() {
                if(this.geton_keys_ids.length !== 3) {
                    this.$Message.error('请选择商品分类!!!! OK?');
                    return false;
                }
                else {
                    this.$Message.success('走你');
                }
            },
            async tab_clickon_onfun() {
                if(this.current_step_and_tab == 1 || this.current_step_and_tab == 4) {
                    const {data:res_data} = await this.$axios.get(`categories/${this.geton_keys_ids[2]}/attributes`, {
                        params:{
                            sel:'many'
                        }
                    });
                    if(res_data.meta.status != 200) return this.$Message.error('出错啦');
                    res_data.data.forEach(item => {
                        item.attr_vals = item.attr_vals.split(" ");
                    });
                    this.shop_d_params_lists = res_data.data;
                    return this.$Message.success('ok');
                }else if (this.current_step_and_tab == 2 || this.current_step_and_tab == 4) {
                    const {data:res_data} = await this.$axios.get(`categories/${this.geton_keys_ids[2]}/attributes`, {
                        params:{
                            sel:'only'
                        }
                    });
                    if(res_data.meta.status != 200) return this.$Message.error('出错啦');
                    // res_data.data.forEach(item => {
                    //     item.attr_vals = item.attr_vals.split(" ");
                    // });
                    this.shop_j_params_lists = res_data.data;
                    return this.$Message.success('ok');
                }
            },
            // 当已上传的文件被预览时触发的函数
            Preview_image_onfun(file) {
                var my_img_url = file.response.data.url;
                this.currt_url = my_img_url;
                this.is_img_preview_show = true;
            },
            //当图片移出时触发的函数
            remove_image_onfun(file) {
                // 临时路径
                var my_tmp_path = file.response.data.tmp_path;
                var my_index = this.add_from_data.pics.findIndex(item => {
                    return item.pic === my_tmp_path;
                });
                this.add_from_data.pics.splice(my_index, 1);
                console.log(this.add_from_data);
            },
            //当图片移出文件列表前的函数
            before_remove_onfun() {

            },
            // 当图片上传成功后
            on_imgUP_success_onfun(res) {
                if(res.meta.status != 200) return this.$Message.error('上传失败!');
                var img = {
                    pic: res.data.tmp_path
                }
                this.add_from_data.pics.push(img);
                return this.$Message.success('上传成功!');
            },
            // 最终提交添加的函数
            add_goods_onfun() {
                this.$refs.add_from_ref.validate(async (is_success) => {
                    if(!is_success) {
                        return this.$Message.error('请正确填写!');
                    }
                    this.add_from_data.goods_cat = _.cloneDeep(this.geton_keys_ids).join(',');
                    // 处理动态参数
                    this.shop_d_params_lists.forEach((item) => {
                        var my_obj1 = {
                            attr_id: item.attr_id,
                            attr_value: item.attr_vals
                        };
                        this.add_from_data.attrs.push(my_obj1);
                    });
                    // 处理静态参数
                    this.shop_j_params_lists.forEach((item) => {
                        var my_obj2 = {
                            attr_id: item.attr_id,
                            attr_value: item.attr_vals
                        };
                        this.add_from_data.attrs.push(my_obj2);
                    });
                    // 开始发请求添加商品
                    const {data:res_data} = await this.$axios.post('/goods', this.add_from_data)
                    if(res_data.meta.status != 201) return this.$Message.error('添加失败!');
                    this.$router.push('/goods');
                    return this.$Message.success('添加成功!');
                });
            }
        },
        
        mounted () {
            // 调用函数获取分类列表
            this.get_goods_fenlei_data();
        },
        created () {
            
        },
    }
</script>

<style>

    .el-checkbox {
        margin: 0 7px 0 0 !important;
    }
</style>